import * as echarts from 'echarts'

type EChartsOption = echarts.EChartsOption
export const useEchartsData = (
  payDate: string[],
  payCount: number[],
  defaultPieData: any
) => {
  // 访问量（图表）
  const accessOption: EChartsOption = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
      }
    ]
  }
  // 支付笔数（图表）
  const payOption: EChartsOption = {
    xAxis: {
      type: 'category',
      data: payDate,
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        data: payCount,
        type: 'bar'
      }
    ]
  }
  // 品牌销售额占比（图表）
  const pieOption: EChartsOption = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '品牌销售额',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        data: defaultPieData
      }
    ]
  }

  // 支付笔数和支付金额趋势（图表）
  const tradeOption: EChartsOption = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['支付笔数', '支付金额']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '5:00',
        '5:30',
        '6:00',
        '6:30',
        '7:00',
        '7:30',
        '8:00',
        '8:30',
        '9:00',
        '9:30',
        '10:00',
        '10:30',
        '11:00',
        '11:30',
        '12:00'
      ]
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ],
    series: [
      {
        name: '支付笔数',
        type: 'line',
        stack: 'Total',
        data: [
          845, 123, 679, 456, 382, 710, 245, 589, 314, 967, 53, 888, 439, 777,
          784
        ],
        smooth: true
      },
      {
        name: '支付金额',
        type: 'line',
        stack: 'Total',
        data: [
          278, 934, 615, 342, 889, 100, 500, 743, 187, 323, 564, 7, 998, 431,
          1248
        ],
        smooth: true
      }
    ]
  }

  return {
    accessOption,
    payOption,
    pieOption,
    tradeOption
  }
}
